<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .b1{
            height: 40px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
        li{
            list-style: none;
        }
        .b1 > div{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            margin: 0 10px; 
            position: relative;
        }
        div span{
            border-left: 1px solid #ccc;
        }
        .box1 .menu{
            width: 200px;
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid #ccc;;
            border-top: none;
            display: none;
        }

        .box1:hover .menu{
            display: inline-block;
            
        }
        .box1:hover{
            cursor: pointer;
        }
        .menu li{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
        }
        .menu li:hover{
            background-color: #ccc;
        }
        .menu li:last-child{
            border-bottom: none;
        }
        .ooo{
            width: 1000px;
            position: absolute;
            top:40px;
            left:50%;
            transform: translateX(-50%);
            display: none;
        }
        img{
            display: inline-block;
            width: 200px;
            height: 100px;
        }
        .ooo div:hover{
            
            box-shadow: 10px 10px 20px #ccc ;
        }
        h1{
            display: inline-block;
            position: absolute;
            color: white;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .ooo div{
            display: inline-block;
            position: relative;
            height: 100px;
            margin-top: 10px;
        }
        .box2:hover .ooo{
            display: inline-block;
        }
        .box2:hover{
            cursor: url(./Cat.png),pointer;
        }

    </style>
</head>

<body>
    <div class="b1">
        <div class="box1">菜单一
            <div class="menu">
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
                <li>菜单四</li>
            </div>
        </div>
        <span></span>
        <div class="box2">菜单二
            <div class="ooo">
                <div>
                    <h1>村落</h1>
                    <img src="./img/村落.png" alt="">
                </div>
                <div>
                    <h1>火车</h1>
                    <img src="./img/火车.png" alt="">
                </div>
                <div>
                    <h1>牧场</h1>
                    <img src="./img/牧场.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
</html>